<template>
  <div class="app-container">
    <el-form :inline="true" :model="formInline" class="demo-form-inline">
      <el-form-item label="">
        <el-select v-model="pageDto.where.quType" placeholder="请选择">
          <el-option
            v-for="item in typeArr"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          >
          </el-option>
        </el-select>
      </el-form-item>

      <el-form-item label="">
        <el-input
          v-model="pageDto.where.content"
          placeholder="题目内容"
        ></el-input>
      </el-form-item>

      <el-form-item>
        <el-select
          v-model="pageDto.where.repoIds"
          multiple
          placeholder="请选择"
        >
          <el-option
            v-for="item in repoList"
            :key="item.id"
            :label="item.title"
            :value="item.id"
          >
          </el-option>
        </el-select>
      </el-form-item>

      <el-form-item>
        <el-button type="primary" @click="search()">查询</el-button>
        <el-button type="primary" icon="el-icon-plus" @click="toQuAdd()"
          >添加</el-button
        >
        <el-button type="danger" icon="el-icon-delete" @click="delBatch()"
          >批量删除</el-button
        >
        <el-button type="danger" icon="el-icon-delete" @click="exportQu()"
          >导出</el-button
        >
      </el-form-item>

      <el-form-item label="导入试题">
        <el-upload
          class="upload-demo"
          :action="uploadUrl"
          :headers="headers"
          :on-remove="handleRemove"
          name="file"
          :limit="1"
          :on-success="uploadSuccess"
          :auto-upload="true"
          list-type="picture"
        >
          <el-button size="small" type="primary">点击上传</el-button>
          <div slot="tip" class="el-upload__tip">
            只能上传jpg/png文件，且不超过500kb
          </div>
        </el-upload>
      </el-form-item>
    </el-form>

    <el-table :data="quList" stripe style="width: 100%" ref="repotable">
      <el-table-column type="selection" width="55"> </el-table-column>
      <el-table-column prop="quType" label="题目类型" width="100">
        <template slot-scope="scope">
          <div>
            {{ scope.row.quType | quTypeFilter }}
          </div>
        </template>
      </el-table-column>
      <el-table-column prop="quType" label="难易程度" width="100">
        <template slot-scope="scope">
          <div>
            {{ scope.row.level | levelFilter }}
          </div>
        </template>
      </el-table-column>
      <el-table-column prop="content" label="题目内容" width="500">
        <template slot-scope="scope">
          <div>
            <!-- <a href="javascript:void(0)" @click.prevent="toUpdate(scope.row.id)">{{scope.row.content}}</a> -->

            <span v-html="scope.row.content"></span>
          </div>
        </template>
      </el-table-column>
      <el-table-column prop="createTime" label="创建时间"> </el-table-column>
      <el-table-column label="操作">
        <div slot-scope="scope">
          <el-button
            @click="del(scope.row.id)"
            size="small"
            type="danger"
            icon="el-icon-delete"
            circle
          ></el-button>
          <el-button
            @click="edit(scope.row)"
            size="small"
            type="primary"
            icon="el-icon-edit"
            circle
          ></el-button>
        </div>
      </el-table-column>
    </el-table>
    <br /><br />
    <el-pagination
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      :current-page="pageDto.now"
      :page-sizes="[3, 5, 50, 100]"
      :page-size="pageDto.size"
      layout="total, sizes, prev, pager, next, jumper"
      :total="total"
    >
    </el-pagination>
  </div>
</template>
<script>
import { page } from '@/api/qu'
import { fetchRepos } from '@/api/repo'
export default {
  data () {
    return {
      uploadUrl: `${process.env.VUE_APP_BASE_API}/excel/import`,
      headers: { token: localStorage.getItem('token') },
      //题库列表
      repoList: [],
      //分页+查询条件
      pageDto: {
        now: 1,
        size: 5,
        where: {
          repoIds: []
        }
      },
      //题目列表
      quList: [],
      total: 0,
      dialogFormVisible: false,
      repoForm: {
        title: '',
        remark: ''
      },
      typeArr: [
        {
          value: 1,
          label: '单选题'
        },
        {
          value: 2,
          label: '多选题'
        },
        {
          value: 3,
          label: '判断题'
        },
        {
          value: 4,
          label: '简答题'
        }
      ]
    }
  },
  methods: {
    edit (row) {
      this.$router.push({ path: '/qu/edit', query: { quId: row.id } })
    },
    search () {
      page(this.pageDto).then(res => {
        console.log(res)
        this.quList = res.list
        this.total = res.total
      })
    },
    handleCurrentChange (page) {
      this.pageDto.now = page
      this.search()
    },
    handleSizeChange (size) {
      this.pageDto.size = size
      this.search()
    },
    // 获取题库列表
    fetchRepos () {
      fetchRepos().then(res => {
        console.log(res)
        this.repoList = res.data
      })
    }
  },
  created () {
    this.search()
    this.fetchRepos()
  }
}
</script>
